<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>城市</el-breadcrumb-item>
                <el-breadcrumb-item>城市管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="0px" class="demo-ruleForm" style="float: left;">
            <el-form-item prop="name" class="input_edit" >
               <el-input v-model="ruleForm.name" placeholder="城市名称"  ></el-input>
            </el-form-item>
            <el-form-item prop="code" class="input_edit" >
               <el-input v-model="ruleForm.code" placeholder="城市编码"  ></el-input>
            </el-form-item>
            <div class="login-btn" style="float: left">
                <el-button type="primary" icon="search" @click="search()">搜索</el-button>
            </div>
        </el-form>
        <div style="float: right">
            <el-button @click="add" type="primary"><i class="el-icon-plus"></i> 添加</el-button>
            <el-button @click="del()" type="primary" icon="delete">删除</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="auto"  min-width="80spx">
            </el-table-column>
            <el-table-column prop="name" label="名称" min-width="160spx">
            </el-table-column>
            <el-table-column prop="code" label="代码" min-width="160spx">
            </el-table-column>
            <el-table-column label="操作" min-width="175spx">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="cur_page"
               :page-sizes="[10, 20, 50]"
               :page-size="page_size"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="dailogTitle" :visible.sync="editDialogFormVisible">
            <div style="text-align:center;">
                <div style="text-align:left;width:90%;margin:0 auto;">
                    <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                         <el-form-item prop="id"  style="display:none;">
                           <el-input v-model="entityForm.id" placeholder="编号"  ></el-input>
                        </el-form-item>
                        <el-form-item prop="name"  label="名称">
                           <el-input v-model="entityForm.name" placeholder="城市名称" ></el-input>
                        </el-form-item>
                        <el-form-item prop="code"   label="编码">
                           <el-input v-model="entityForm.code" placeholder="城市编码" ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible=false">取消</el-button>
                <el-button  type="primary" @click="saveUpdate()">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        "id": 1,
                        "name": "zry",
                        "code": "kfjkjd",
                        "pid": "12",
                        "icon": "http:kjjkj"
                    }
                ],
                cur_page: 1,
                page_size: 10,
                total: 1000,
                // propretis for search
                param: {

                },
                searchData:{},
                // propretis for dailog
                dailogTitle: '',
                editDialogFormVisible: false,
                addDialogFormVisible: false,
                saveOrUpdate: 'save',
                // record for input
                entityForm: {
                    id: '',
                    name: '',
                    code: '',
                    pid: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入公司名', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入编码', trigger: 'blur'}
                    ],
                    pid: [
                        {required: true, message: '请输入排序数', trigger: 'blur'}
                    ],
                },
                ruleForm: {
                    name: '',
                    code: ''
                },
                multipleSelection: []
            }
        },
        created(){
            this.getData();
            this.editDialogFormVisible=true;
        },
        mounted(){
            this.editDialogFormVisible=false;
            $(".el-dialog").css("width","550px");
        },
        methods: {
            handleCurrentChange(val){
                this.cur_page = val;
                this.getData();
            },
            handleSizeChange(val){
                this.page_size = val;
                this.getData();
            },
            getData(){
                let self = this;
                var data=self.searchData;
                data.pageSize=self.page_size;
                data.pageNumber=self.cur_page;
                data.param=new Object();
                data.param.orderField='code';
                data.param.orderRule='ASC';
                self.myajax("/area/list",data,function(data){
                   self.tableData=data.data.list;
                   self.total=data.data.total;
                });
            },
            handleEdit(index, row) {
                console.log(row);
                let self = this;
                self.dailogTitle = '更改信息';
                self.saveOrUpdate = 'update';
                self.entityForm.id = row.id.toString().trim();
                self.entityForm.name = row.name.toString().trim();
                self.entityForm.code = row.code.toString().trim();
                self.entityForm.pid = row.pid.toString().trim();
                self.editDialogFormVisible = true;
            },
            handleDelete(index, row) {
                this.del(row.id);
            },
            del(id) {
                var self=this;
                var ids = new Array();
                if (id) {
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }

                self.$confirm('确定要删除这'+ ids.length +'项吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={ids:ids}; 
                    self.myajax("/area/delete",data,function(data){
                        var code=data.code;
                        if(code==2000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            add() {
                let self = this;
                self.dailogTitle = '添加城市';
                self.saveOrUpdate = "save";
                // self.entityForm = {};
                self.entityForm.id = "";
                self.entityForm.name = "";
                self.entityForm.code = "";
                self.entityForm.pid = "";
                self.editDialogFormVisible = true;
            },
            saveUpdate(){
                let self = this;
                if (self.saveOrUpdate == 'save') {
                    self.$confirm('确定要保存吗？', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                        self.save();
                    });
                }
                if (self.saveOrUpdate == 'update') {
                    self.$confirm('确定要修改吗？', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                        self.update();
                    });
                }
            },
            save() {
                let self = this;
                this.myajax("/area/create",self.entityForm,function(){
                    console.log(self.entityForm);
                    self.editDialogFormVisible = false;
                    self.getData();
                });
            },
            update() {
                let self = this;
                console.log("update");
                this.myajax("/area/update",self.entityForm,function(){
                    console.log(self.entityForm);
                    self.editDialogFormVisible = false;
                    self.getData();
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            search() {
                this.cur_page = 1;
                this.getData();
            },
            setValue1(value){
                this.entityForm.icon="";
                if(value){
                this.entityForm.icon=value;
            }
        }
        }
    }
</script>

<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    span {
        white-space:normal;
    }
</style>
